<template>
	<view class="background" :class="filterData.active?'hidden-style':''">
		<view class="filter flex-row">
			<view class="filter-item justify-center items-center" @click="dofilterProject">
				{{filterProject.text}}<image src="../images/filter.png" mode="aspectFit"/>
			</view>
			<view class="filter-item justify-center items-center" @click="dofilterSubject">
				{{filterSubject.text}}<image src="../images/filter.png" mode="aspectFit"/>
			</view>
			<view class="filter-item justify-center items-center" @click="dofilterYear">
				{{filterYear.text}}<image src="../images/filter.png" mode="aspectFit"/>
			</view>
			<view class="filter-item justify-center items-center" @click="dofilterArea">
				{{filterArea.text}}<image src="../images/filter.png" mode="aspectFit"/>
			</view>
		</view>
		<popup-filter ref="popupFilter" :filterData="filterData" @moreYear="moreYear"
			@clickYear="clickYear" @clickFilterItem="clickFilterItem"
			@filterSubmit="filterSubmit" filterClears="filterClears"></popup-filter>
		<list-item :items="items"></list-item>
		<!-- <uni-load-more :status="status" /> 配合使用分页下拉加载效果--> 
	</view>
</template>

<script>
	import ListItem from '../components/list-item.vue'
	import PopupFilter from '../components/popup-filter.vue'
	export default {
		components:{
			ListItem,PopupFilter
		},
		data() {
			return {
				items:[],
				pageNo: 1,
				size: 10,
				status: 'more',
				reload: true,
				filterData:{},
				filterProject:{
					filterName:'类别',
					active:false,
					items:[
						{
							id:'1',
							name:'类别1',
							active:false
						},
						{
							id:'2',
							name:'类别2',
							active:false
						},
						{
							id:'3',
							name:'类别3',
							active:false
						},
						{
							id:'4',
							name:'类别4',
							active:false
						},
						{
							id:'5',
							name:'类别5',
							active:false
						},
						{
							id:'6',
							name:'类别6',
							active:false
						}
					],
					text:'类别',
					value:''
				},
				filterSubject:{
					filterName:'颜色',
					active:false,
					items:[
						{
							id:'1',
							name:'颜色1',
							active:false
						},
						{
							id:'2',
							name:'颜色2',
							active:false
						},
						{
							id:'3',
							name:'颜色3',
							active:false
						},
						{
							id:'4',
							name:'颜色4',
							active:false
						},
						{
							id:'5',
							name:'颜色5',
							active:false
						},
						{
							id:'6',
							name:'颜色6',
							active:false
						}
					],
					text:'颜色',
					value:''
				},
				filterYear:{
					filterName:'年份',
					active:false,
					years:[],
					text:'年份',
					value:''
				},
				filterArea:{
					filterName:'区域',
					active:false,
					items:[
						{
							id:'1',
							name:'区域1',
							active:false
						},
						{
							id:'2',
							name:'区域2',
							active:false
						},
						{
							id:'3',
							name:'区域3',
							active:false
						},
						{
							id:'4',
							name:'区域4',
							active:false
						},
						{
							id:'5',
							name:'区域5',
							active:false
						},
						{
							id:'6',
							name:'区域6',
							active:false
						}
					],
					text:'区域',
					value:''
				}
			}
		},
		computed:{
			
		},
		onLoad(){
			this.getListData()
			this.getYear()
		},
		onReachBottom() {
			this.reload = false
			this.pageNo++
			console.log('this.pageNo='+this.pageNo)
			//this.getListData();
			
		},
		methods: {
			getYear(yearStart){
				let i = 0
				let max = 9
				if(!yearStart){
					let d = new Date()
					yearStart = d.getFullYear()
				}else{
					i = 1
					max = 10
				}
				
				for(;i<=max;i++){
					this.filterYear.years.push(Number(yearStart)-i)
				}
			},
			moreYear(){
				this.getYear(this.filterYear.years[this.filterYear.years.length-1])
			},
			clickYear(v){
				this.filterYear.text = v
				this.filterYear.value = v
			},
			clickFilterItem(n,v){
				if(n===this.filterProject.filterName){
					// const item = this.filterProject.items.filter(it=>it.id===v.id)
					// item[0].active = true
					this.filterProject.text = v.name
					this.filterProject.value = v.id
				}else if(this.filterSubject.filterName==n){
					this.filterSubject.text = v.name
					this.filterSubject.value = v.id
				 }else if(this.filterArea.filterName==n){
					this.filterArea.text = v.name
					this.filterArea.value = v.id
				 }
			},
			getListData(){
				//模拟api请求
				this.items =[
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					},
					{
						name:'XXXXXXXXXXX',
						type:'类别1',
						year:2023,
						color:'红色',
						area:'广东'
					}
				]
			},
			dofilterProject(){//切换导航按钮
			    this.filterProject.active = !this.filterProject.active
				this.filterData = this.filterProject
				
				this.filterSubject.active = false
				this.filterYear.active = false
				this.filterArea.active = false
			},
			dofilterSubject(){//切换导航按钮
			    this.filterSubject.active = !this.filterSubject.active
				this.filterData = this.filterSubject
				
				this.filterProject.active = false
				this.filterYear.active = false
				this.filterArea.active = false
				
			},
			dofilterYear(){//切换导航按钮
			    this.filterYear.active = !this.filterYear.active
				this.filterData = this.filterYear
				
				this.filterProject.active = false
				this.filterSubject.active = false
				this.filterArea.active = false
				
			},
			dofilterArea(){//切换导航按钮
			    this.filterArea.active = !this.filterArea.active
				this.filterData = this.filterArea
				
				this.filterProject.active = false
				this.filterSubject.active = false
				this.filterYear.active = false
				
			},
			filterClears(){
				
			},
			filterSubmit(param){
				console.log(param)
				this.filterData.active = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		background-color: #f7f7f7;
		width: 100vw;
		// min-height: calc(100vh - 100rpx);
		/* #ifdef H5 */
		min-height: 70vh;
		/* #endif */
		/* #ifndef H5 */
		min-height: 100vh;
		/* #endif */
		padding-top: 1rpx;
		
		.filter{
			background: #fff;
			padding: 30rpx;
			width: 100vw;
			overflow-x:scroll;
			.filter-item{
				min-width: 200rpx;
				height: 80rpx;
				background: #F4F6F9;
				border-radius: 20px;
				background: #F4F6F9;
				background-size: 39rpx 30rpx;
				margin-right: 20rpx;
				
				font-size: 32rpx; 
				color: #7F8BB4;
				font-weight: 400;
				
				image{
					width: 33rpx;
				}
			}
		}
	}
	.hidden-style{
		/* #ifdef H5 */
		height: 90vh;
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow:hidden
	}
	
	/** 引入真实项目时，请将以下样式拷贝到全局样式uni.scss中，不需要每个页面都定义 ----start**/
	view,
	image,
	text {
	  box-sizing: border-box;
	  flex-shrink: 0;
	}
	
	#app {
	  width: 100vw;
	  height: 100vh;
	}
	
	.flex-row {
	  display: flex;
	  flex-direction: row;
	}
	
	.flex-col {
	  display: flex;
	  flex-direction: column;
	}
	
	.justify-start {
	  display: flex;
	  justify-content: flex-start;
	}
	
	.justify-center {
	  display: flex;
	  justify-content: center;
	}
	
	.justify-end {
	  display: flex;
	  justify-content: flex-end;
	}
	
	.justify-evenly {
	  display: flex;
	  justify-content: space-evenly;
	}
	
	.justify-around {
	  display: flex;
	  justify-content: space-around;
	}
	
	.justify-between {
	  display: flex;
	  justify-content: space-between;
	}
	
	.items-start {
	  display: flex;
	  align-items: flex-start;
	}
	
	.items-center {
	  display: flex;
	  align-items: center;
	}
	
	.items-end {
	  display: flex;
	  align-items: flex-end;
	}
	/** 引入真实项目时，请将以下样式拷贝到全局样式uni.scss中，不需要每个页面都定义 ----end**/
</style>
